<template>
    <div>
        <div class="class-header">
            <div class="header-nav">
                <div class="header-nav-left">
                    <router-link to="/">
                        <img src="../img/logo.png" alt="">
                        <span>80教育商城</span>
                    </router-link>
                </div>
                <div class="header-nav-right">
                    <ul class="header-nav-right-list">
                        <router-link to="/Search">
                            <li><i class="iconfont icon-search"></i> </li>
                            <li><span class="search">搜索</span></li>
                        </router-link>
                        <li><span>会员中心</span></li>
                    </ul>
                </div>    
            </div>
        </div>

        <div class="class-content-wp">
            <div class="class-title-wp">
                <div>
                    {{this.$route.params.inp == ''? '注册公用设备工程师' : this.$route.params.inp }}
                </div>
            </div>

            <div class="class-list-wp">
                <div class="class-content-filter">
                    <div>名称<i class="iconfont icon-play_fill"></i></div>
                    <div>时间<i class="iconfont icon-play_fill"></i></div>
                    <div>价格<i class="iconfont icon-play_fill"></i></div>
                    <div>筛选<i class="iconfont icon-play_fill"></i></div>
                </div>
            </div>
            <div class="class-content-booklist" v-for="(list,index) in list" :key="index">
                <router-link :to="`/BookDetail/${list.id}`">
                    <div class="class-content-book">
                        <div class="class-content-book-img">
                            <img src="../img/book1.jpg" alt="">
                        </div>
                        <div class="tableCell tableCell-70">
                            <div class="nameWrap">
                                <p class="paramName">{{list.name}}</p>
                            </div>
                            <p class="productParam paramWrap ">类型：{{list.leixing}}</p>
                            <p class="productParam paramWrap ">材质：{{list.caizhi}}</p>
                            <p class="productParam paramWrap ">销量：{{list.xiaoliang}}</p>
                            <p class="productParam paramPrice paramWrap ">
                                <span class="mallPrice">价格：￥{{list.price}}</span>
                                <span class="iconfont icon-publishgoods_fill shop-car"></span>
                            </p>
                        </div>
                    </div>
                </router-link>
            </div>

            <div class="pagenation ">
                <div class="pagePrev">&lt;</div>
                <div class="pagenationSelectDiv">
                    <select class="pageSelect">
                        <option class="pageOptions">1&nbsp;&nbsp;/&nbsp;&nbsp;4</option>
                        <option class="pageOptions">2&nbsp;&nbsp;/&nbsp;&nbsp;4</option>
                        <option class="pageOptions">3&nbsp;&nbsp;/&nbsp;&nbsp;4</option>
                        <option class="pageOptions">4&nbsp;&nbsp;/&nbsp;&nbsp;4</option>
                    </select>
                </div>
                <div class="pageNext">&gt;</div>
            </div>
        </div>
        <div class="backTop">
            <span class="iconfont icon-packup return-top" style="color:#3285ff;background-color:#ccc"></span>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('searchClassDetail')
export default {
    data(){
        return{
            list:[]
        }
    },
    mounted(){
        this.getSearchClassDetailData(this.$route.params.inp).then(data=>this.list = data)
    },
    methods:{
        ...mapActions(['getSearchClassDetailData',]),
    }
}
</script>

<style scoped>
.tableCell-70 {
    width: 70%;
}
.tableCell {
    display: table-cell;
    vertical-align: middle;
    padding: 0 0;
    padding-left: 10px;
}
.paramName {
    font-size: 13px;
    color: #333;
    margin-bottom: 4px;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 5px;
    line-height: 17px;
}
.productParam {
    font-size: 11px;
    color: #666;
    line-height: 17px;
}
.paramWrap {
    padding-right: 10px;
}
.mallPrice {
    color: #3285ff;
    word-wrap: break-word;
}
.class-content-book{
    display: flex;
    margin: 5px 0;
    padding: 10px 0;
    border-top: 1px solid #f0f0f0;
}
.class-content-book-img{
    width: 30%;
    padding-left: 10px;
}
.class-content-book-img img{
    width: 100%;
    position: relative;
    top: 12px;
}
.shop-car{
    float: right;
    font-size: 20px;
    color: #3285ff;
}


.class-content-wp{
    margin-top: 8px;
    background-color: #fff;
    margin-bottom: 50px;
}
.class-title-wp{
    height: 45px;
    line-height: 45px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    color: #3285ff;
    font-size: 14px;
    padding-left: 12px;
}
.class-content-filter{
    display: flex;
    height: 24px;
    line-height: 24px;
    padding: 3px 15px;
    font-size: 14px;
    color: #636363;
    text-align: center;
}
.class-content-filter .icon-play_fill{
     color: #636363;
     font-size: 12px;
     position: absolute;
     transform: rotate(90deg);
}
.class-content-filter>div{
    flex-grow: 1;
    position: relative;
    height: 24px;
}
.pagenation{
    font-size: 14px;
    color: #333;
    height: 50px;
    width: 100%;
    text-align: center;
    position: relative;
    line-height: 50px;
    background-color: #fff;
}
.pagenation .pageNext, .pagenation .pagePrev {
    width: 26px;
    height: 26px;
    background: #3285ff;
    border: 0;
    border-radius: 50%;
    overflow: hidden;
    background-size: 100%;
    line-height: 21px;
    color: #fff;
    position: absolute;
    top: 15px;
}
.pagenation .pagePrev{
  left: 105px;
}
.pagenation .pageNext{
  left: 190px;
}
.pageSelect{
  width: 72px;
  height: 25px;
  line-height: 1.05rem;
  font-size: 12px;
  border: none;
  background: 0 0;
  border-radius: 20px;
  position: relative;
  left: 10px;
  padding: 0 7px;
  margin-bottom: 10px;
  background: #fff;
  font-weight: 400;
  margin-top: 12px;
  text-indent: 0;
}
</style>
